<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="12">
            <a-form-item label="所在机构">
              <j-select-depart
                v-model="queryParam.orgCode"
                :trigger-change="true"
                custom-return-field="id"
                :multi="false"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="用户姓名">
              <j-input v-model="queryParam.realname" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <!--          <a-col :md="6" :sm="8">-->
          <!--            <a-form-item label="性别">-->
          <!--              <a-select v-model="queryParam.sex" placeholder="请选择性别">-->
          <!--                <a-select-option value="">请选择</a-select-option>-->
          <!--                <a-select-option value="1">男</a-select-option>-->
          <!--                <a-select-option value="2">女</a-select-option>-->
          <!--              </a-select>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <!--          <template v-if="toggleSearchStatus">-->
          <!--            <a-col :md="6" :sm="8">-->
          <!--              <a-form-item label="真实名字">-->
          <!--                <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>-->
          <!--              </a-form-item>-->
          <!--            </a-col>-->

          <!--            <a-col :md="6" :sm="8">-->
          <!--              <a-form-item label="手机号码">-->
          <!--                <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>-->
          <!--              </a-form-item>-->
          <!--            </a-col>-->

          <!--            <a-col :md="6" :sm="8">-->
          <!--              <a-form-item label="用户状态">-->
          <!--                <a-select v-model="queryParam.status" placeholder="请选择">-->
          <!--                  <a-select-option value="">请选择</a-select-option>-->
          <!--                  <a-select-option value="1">正常</a-select-option>-->
          <!--                  <a-select-option value="2">冻结</a-select-option>-->
          <!--                </a-select>-->
          <!--              </a-form-item>-->
          <!--            </a-col>-->
          <!--          </template>-->

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button
                type="primary"
                icon="reload"
                style="margin-left: 8px"
                @click="searchReset"
              >清除条件</a-button>
              <!--              <a @click="handleToggleSearch" style="margin-left: 8px">-->
              <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--              </a>-->
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button v-has="'user:add'" type="primary" icon="plus" @click="handleAdd('用户管理-新增')">添加用户</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
      <a-upload
        name="file"
        :show-upload-list="false"
        :multiple="false"
        :data="{systemType:'1'}"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
        accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <j-third-app-button
        biz-type="user"
        :selected-row-keys="selectedRowKeys"
        sync-to-app
        sync-to-local
        @sync-finally="onSyncFinally"
      />
      <a-button type="primary" icon="hdd" @click="recycleBinVisible=true">回收站</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
          <!-- <a-icon type="delete" @click="$message.error('请联系管理员操作')" /> -->
          <a-icon type="delete" @click="batchDel" />
            删除
          </a-menu-item>
          <!--          <a-menu-item key="2">-->
          <!--            <a-icon type="lock" @click="batchFrozen('2')"/>-->
          <!--            冻结-->
          <!--          </a-menu-item>-->
          <!--          <a-menu-item key="3">-->
          <!--            <a-icon type="unlock" @click="batchFrozen('1')"/>-->
          <!--            解冻-->
          <!--          </a-menu-item>-->
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
      <j-super-query :field-list="superQueryFieldList" @handleSuperQuery="handleSuperQuery" />
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon" />已选择&nbsp;<a style="font-weight: 600">{{
          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
          </div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record,'用户管理-编辑')">编辑</a>

          <a-divider type="vertical" />

          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record,'用户管理-详情')">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
              </a-menu-item>

              <a-menu-item>
                <!-- <a @click="()=>{$message.error('请联系管理员操作')}">删除</a> -->
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>

              <!--              <a-menu-item v-if="record.status==1">-->
              <!--                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">-->
              <!--                  <a>冻结</a>-->
              <!--                </a-popconfirm>-->
              <!--              </a-menu-item>-->

              <!--              <a-menu-item v-if="record.status==2">-->
              <!--                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1,record.username)">-->
              <!--                  <a>解冻</a>-->
              <!--                </a-popconfirm>-->
              <!--              </a-menu-item>-->

              <!--              <a-menu-item>-->
              <!--                <a href="javascript:;" @click="handleAgentSettings(record.username)">代理人</a>-->
              <!--              </a-menu-item>-->

            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->
    <!--    <organ-modal ref="departModal" @ok="updateQueryParam"></organ-modal>-->

    <user-modal ref="modalForm" @ok="modalFormOk" />

    <password-modal ref="passwordmodal" @ok="passwordModalOk" />

    <sys-user-agent-modal ref="sysUserAgentModal" />

    <!-- 用户回收站 -->
    <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk" />

  </a-card>
</template>

<script>
import OrganModal from './modules/OrganModal'
import UserModal from './modules/UserModal'
import PasswordModal from './modules/PasswordModal'
import { putAction, getFileAccessHttpUrl } from '@/api/manage'
import { frozenBatch } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SysUserAgentModal from './modules/SysUserAgentModal'
import JInput from '@/components/jeecg/JInput'
import UserRecycleBinModal from './modules/UserRecycleBinModal'
import JSuperQuery from '@/components/jeecg/JSuperQuery'
import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'

export default {
  name: 'UserList',
  components: {
    JThirdAppButton,
    SysUserAgentModal,
    UserModal,
    PasswordModal,
    JInput,
    UserRecycleBinModal,
    JSuperQuery,
    OrganModal
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      description: '这是用户管理页面',
      queryParam: {
      },
      superParam: {
        systemType: '1'
      },
      recycleBinVisible: false,
      columns: [
        /* {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },*/
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username',
          width: 120,
          sorter: true
        },
        {
          title: '用户姓名',
          align: 'center',
          width: 100,
          dataIndex: 'realname'
        },
        {
          title: '头像',
          align: 'center',
          width: 120,
          dataIndex: 'avatar',
          scopedSlots: { customRender: 'avatarslot' }
        },

        {
          title: '性别',
          align: 'center',
          width: 80,
          dataIndex: 'sex_dictText',
          sorter: true
        },
        {
          title: '生日',
          align: 'center',
          width: 100,
          dataIndex: 'birthday'
        },
        {
          title: '手机号码',
          align: 'center',
          width: 100,
          dataIndex: 'phone'
        },
        {
          title: '部门',
          align: 'center',
          width: 180,
          dataIndex: 'orgCodeTxt'
        },
        // {
        //   title: '负责部门',
        //   align: "center",
        //   width: 180,
        //   dataIndex: 'departIds_dictText'
        // },
        // {
        //   title: '状态',
        //   align: "center",
        //   width: 80,
        //   dataIndex: 'status_dictText'
        // },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 170
        }

      ],
      superQueryFieldList: [
        { type: 'input', value: 'username', text: '用户账号' },
        { type: 'input', value: 'realname', text: '用户姓名' },
        { type: 'select', value: 'sex', text: '性别', dictCode: 'sex' }
      ],
      url: {
        syncUser: '/act/process/extActProcess/doSyncUser',
        list: '/sys/user/list',
        delete: '/sys/user/delete',
        deleteBatch: '/sys/user/deleteBatch',
        exportXlsUrl: '/sys/user/exportXls',
        importExcelUrl: 'sys/user/importExcel'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    getAvatarView: function(avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    batchFrozen: function(status) {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return false
      } else {
        let ids = ''
        const that = this
        let isAdmin = false
        that.selectionRows.forEach(function(row) {
          if (row.username == 'admin') {
            isAdmin = true
          }
        })
        if (isAdmin) {
          that.$message.warning('管理员账号不允许此操作,请重新选择！')
          return
        }
        that.selectedRowKeys.forEach(function(val) {
          ids += val + ','
        })
        that.$confirm({
          title: '确认操作',
          content: '是否' + (status == 1 ? '解冻' : '冻结') + '选中账号?',
          onOk: function() {
            frozenBatch({ ids: ids, status: status }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            })
          }
        })
      }
    },
    handleMenuClick(e) {
      if (e.key == 1) {
        // this.$message.error('请联系管理员操作');
        this.batchDel()
      } else if (e.key == 2) {
        this.batchFrozen(2)
      } else if (e.key == 3) {
        this.batchFrozen(1)
      }
    },
    openOrganModel() {
      this.$refs.departModal.show()
    },
    handleFrozen: function(id, status, username) {
      const that = this
      // TODO 后台校验管理员角色
      if (username == 'admin') {
        that.$message.warning('管理员账号不允许此操作！')
        return
      }
      frozenBatch({ ids: id, status: status }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleChangePassword(username) {
      this.$refs.passwordmodal.show(username)
    },
    handleAgentSettings(username) {
      this.$refs.sysUserAgentModal.agentSettings(username)
      this.$refs.sysUserAgentModal.title = '用户代理人设置'
    },
    passwordModalOk() {
      // TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
    },
    onSyncFinally({ isToLocal }) {
      // 同步到本地时刷新下数据
      if (isToLocal) {
        this.loadData()
      }
    }
  }

}
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
